<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCAKE蛋糕-网上订购生日蛋糕</title>
    <link rel="stylesheet" href="./css/rester.css">
    <link rel="stylesheet" href="./css/shoppings.css">
    <link rel="icon" href="http://rhfgn51hx.hn-bkt.clouddn.com/v2-609f59fac9e2a93007e522868276f199_720w.jpg">
</head>

<body>

    <!-- 头部 -->
    <header>
        <div class="top">
            <div class="center">
                <!-- logo插入区域 -->
                <div class="log">
                    <img src="./images/shouye.image/logo.png" alt="">
                </div>
                <!-- 导航栏 -->
                <ul id="one">
                    <li><a href="javascript:;">上海市</a></li>
                    <li><a href="javascript:;">所有产品</a></li>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="dangao.html">蛋糕</a></li>
                    <li><a href="mianbao.html">面包</a></li>
                    <li><a href="javascript:;">小食</a></li>
                    <li><a href="javascript:;">最新活动</a></li>
                </ul>
                <ul id="two">
                    <li><a href="#" id="huanying"> <img src="./images/shopping.image/人像.gif"
                                style="width: 20px;height:20px; margin-top: 28px;" alt=""></a>
                    </li>
                    <li>
                        <img src="./images/shouye.image/购物01.png" alt="">
                    </li>
                    <li>
                        <img src="./images/shouye.image/购物02.png" alt="" style="width: 30px;height:20px;">
                    </li>
                </ul>
            </div>
        </div>

    </header>


    <main>
        <div class="center">
            <div class="myshopping">
                <img src="./images/shopping.image/shopping.png" alt="">
            </div>


            <div class="center">
                <div class="main-xuangou">

                    <!-- <div class="main-xuangou-liebiao">
                        <div class="main-xuangou-liebiao-1-top">
                            <div class="huangou"><span>换购</span></div>
                            <p>已满足换购条件，可换购优惠商品</p>
                        </div>
                        <div class="main-xuangou-liebiao-1">


                            <div class="main-xuangou-liebiao-bottom1">
                                <div class="main-xuangou-liebiao-bottom1-xiaoyuandian">
                                    <span>🎂</span>
                                </div>
                            </div>

                            <div class="main-xuangou-liebiao-bottom2">
                                <img src="./images/shopping.image/1.jpg" alt="" style=" width: 130px;
                                height: 140px;">
                            </div>

                            <div class="main-xuangou-liebiao-bottom3">
                                <p>xxxxx</p>
                                <span>xxxxxxxxxx</span>
                            </div>

                            <div class="main-xuangou-liebiao-bottom4">
                                <div class="main-xuangou-liebiao-bottom4-1">
                                    <select value="选择重量">
                                        <option class="option" value="">2磅 908g</option>
                                        <option class="option" value="">3磅 1.36kg</option>
                                        <option class="option" value="">5磅 2.27kg</option>
                                    </select>
                                </div>

                                <div class="main-xuangou-liebiao-bottom4-2">
                                    <img src="./images//shopping.image/刀叉.png" alt="">
                                    <span>含10套餐具（每套一个餐盘，一把餐勺）</span>
                                </div>

                                <div class="main-xuangou-liebiao-bottom4-3">
                                    巧克力生日牌 <select name="" id="">
                                        <option value="">Happy Birthday</option>
                                        <option value="">不需要</option>
                                        <option value="">生日快乐</option>
                                        <option value="">永远开心</option>
                                    </select>
                                </div>
                            </div>

                            <div class="main-xuangou-liebiao-bottom5">
                                <div class="main-xuangou-liebiao-bottom5-mone">
                                    <a href="">
                                        <div class="huaguo"><i style="color: black;">-</i></div>
                                    </a>
                                    <input type="text" value="1">
                                    <a href="">
                                        <div class="huaguo"><span style="color: black;">+</span></div>
                                    </a>
                                </div>
                                <div class="lazhu">
                                    <span>蜡烛</span>
                                    <select name="" id="">
                                        <option value="">请选择</option>
                                        <option value="">需要</option>
                                        <option value="">不需要</option>
                                    </select>
                                </div>
                            </div>

                            <div class="main-xuangou-liebiao-bottom6">
                                <div class="num">
                                    <span>￥298.00元</span>
                                </div>
                            </div>

                            <div class="main-xuangou-liebiao-bottom7">
                                <img src="./images//shopping.image/垃圾桶.png" alt="">
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>



            <div class="center">
                <div class="jiagoupeijian">
                    <div class="jiagoupeijian-top">
                        <span>加购配件</span>
                    </div>
                    <div class="jiagoupeijian-bottom">
                        <ul>
                            <li>
                                <img src="./images/shopping.image/1.jpg" alt="">
                            </li>
                            <li>
                                <span>保温包</span>
                            </li>
                            <li>
                                <div class="le">
                                    <span>￥10.00元</span>
                                </div>
                                <div class="right">
                                    <img src="./images/shouye.image/nb.png" alt="">
                                </div>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <img src="./images/shopping.image/2.jpg" alt="">
                            </li>
                            <li>
                                <span>(新)数字蜡烛</span>
                            </li>
                            <li>
                                <div class="le">
                                    <span>￥8.00元</span>
                                </div>
                                <div class="right">
                                    <img src="./images/shouye.image/nb.png" alt="">
                                </div>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <img src="./images/shopping.image/3.jpg" alt="">
                            </li>
                            <li>
                                <span>字母蜡烛（HB）</span>
                            </li>
                            <li>
                                <div class="le">
                                    <span>￥15.00元</span>
                                </div>
                                <div class="right">
                                    <img src="./images/shouye.image/nb.png" alt="">
                                </div>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <img src="./images/shopping.image/4.jpg" alt="">
                            </li>
                            <li>
                                <span>钻石心蜡烛</span>
                            </li>
                            <li>
                                <div class="le">
                                    <span>￥5.00元</span>
                                </div>
                                <div class="right">
                                    <img src="./images/shouye.image/nb.png" alt="">
                                </div>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <img src="./images/shopping.image/5.jpg" alt="">
                            </li>
                            <li>
                                <span>餐具</span>
                            </li>
                            <li>
                                <div class="le">
                                    <span>￥2.5元</span>
                                </div>
                                <div class="right">
                                    <img src="./images/shouye.image/nb.png" alt="">
                                </div>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <img src="./images/shopping.image/6.jpg" alt="">
                            </li>
                            <li>
                                <span>小食拎袋</span>
                            </li>
                            <li>
                                <div class="le">
                                    <span>￥3.00元</span>
                                </div>
                                <div class="right">
                                    <img src="./images/shouye.image/nb.png" alt="">
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>


        <div class="center">
            <div class="jiesuan">
                <div class="jiesuan-center">
                    <div class="jiesuan-center-1">
                        <div class="yuan">
                            <span>🎂</span>
                        </div>
                    </div>
                    <div class="jiesuan-center-2">
                        <span>已选择五件商品</span>
                        <p>共计五件商品</p>
                        <a href="javescript:;">配送范围内满98元免配送费</a>
                    </div>
                    <div class="jiesuan-center-3">
                        <div class="jiesuan-center-3-top">
                            <p>合计：</p>
                            <span>￥2780.00元</span>
                        </div>
                        <div class="jiesuan-center-3-bottom">
                            <button class="btn1"><span>继续挑选</span></button>
                            <button class="btn2"><span>结算</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main>

    <!-- 底部 -->
    <footer>
        <div class="center2">
            <div class="footer-top">

                <div class="footer-top-noe1">
                    <div class="footer-top-noe1-top">
                        <img src="./images/shouye.image/logo2.png" alt="">
                    </div>
                    <div class="footer-top-noe1-bottom">
                        <p>订购热线:4006678678(8:00-2000)</p>
                        <p>客服邮箱:cs@mcake.com</p>
                        <p>地址:上海市普邹陀区同普路1130弄3号楼</p>
                        <p>食品生产许可证:S℃12431010700121</p>
                    </div>

                </div>

                <div class="footer-top-noe2">
                    <div class="ul1">
                        <ul>
                            <li><a href="javascript:;" id="n1">关于我们</a></li>
                            <li><a href="javascript:;">企业介绍</a></li>
                            <li><a href="javascript:;">媒体合作</a></li>
                            <li><a href="javascript:;">招贤纳士</a></li>
                            <li><a href="javascript:;">呼叫中心</a></li>
                        </ul>
                    </div>
                    <div class="ul2">
                        <ul>
                            <li><a href="javascript:;" id="n1">帮助中心</a></li>
                            <li><a href="javascript:;">投诉与建议</a></li>
                            <li><a href="javascript:;">会员权益</a></li>
                            <li><a href="javascript:;">购物指南</a></li>
                            <li><a href="javascript:;">支付类</a></li>
                            <li><a href="javascript:;">订单相关</a></li>
                            <li><a href="javascript:;">配送服务</a></li>
                        </ul>
                    </div>
                    <div class="ul3">
                        <ul>
                            <li><a href="javascript:;" id="n1">发现</a></li>
                            <li><a href="javascript:;">公告</a></li>
                        </ul>
                    </div>
                </div>

                <div class="footer-top-noe3">
                    <div class="niubi">
                        <img src="./images/shouye.image/weibo.png" alt="">
                        <img src="./images/shouye.image/weixin.png" alt="">
                    </div>
                </div>
            </div>

            <div class="footer-bottom">
                <div class="footer-bottom-neihe">
                    <div class="footer-bottom-neihe1">
                        <div class="footer-bottom-neihe1-nb">
                            <p>上海卡法电子商务有限公司</p>
                            <p>地址:上海市普邹陀区同普路1130弄3号楼</p>
                            <p>洽谈电话:021-52691591</p>
                            <p>社会信用代码:913101070678091460</p>
                            <p>食品经营许可证:JY13101070034251</p>
                        </div>
                    </div>
                    <div class="footer-bottom-neihe2">
                        <div class="footer-bottom-neihe1-nb">
                            <p>上海卡法电子商务有限公司北京分公司</p>
                            <p>地止:北京市朝那阳区望京西路甲50号1号楼</p>
                            <p>洽谈电话:010-64720188 </p>
                            <p>社会信用代码:911101053484280752 </p>
                            <p>食品经营许可证:JY11105262932938 </p>
                        </div>
                    </div>
                    <div class="footer-bottom-neihe3">
                        <div class="footer-bottom-neihe1-nb">
                            <p>上海卡法电子商务有限公司杭分公司</p>
                            <p>地址:杭州市拱墅区朝晖路179号嘉汇大厦2号楼25-1室</p>
                            <p>洽谈电话:0571-28103688</p>
                            <p>社会信用代码:913301060920344424</p>
                            <p>食品经营许可证:JY13301050141226</p>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="nbtz">
            <h4>Copyright©2012-2022上海卡法电子商务有限公司版权所有1沪CP备12022075号1沪公网安备31010702005582号</h4>
        </div>
    </footer>
</body>

</html>

<script src="./js/jquery.min.js"></script>

<!-- 渲染购物车列表 -->
<script>
    $(function () {
        getCart();
    })

    let goodsInfo = {};

    function getCart() {
        $.get('http://localhost/MCAKE/php/getShoppingCart.php', {
            vipName: getCookie("username")

        }, function (data) {
            goodsInfo = data;
            var arr = [];
            window.arr = [];
            var rss = JSON.parse(data);
            window.rss = rss;
            // console.log(data);

            var add = $.map(rss, function (item) {
                arr.push(item.goodsId)
                return `    <div class="main-xuangou-liebiao" goodsid = ${item.goodsId}>
                        <div class="main-xuangou-liebiao-1-top">
                            <div class="huangou"><span>换购</span></div>
                            <p>已满足换购条件，可换购优惠商品</p>
                        </div>
                        <div class="main-xuangou-liebiao-1">


                            <div class="main-xuangou-liebiao-bottom1">
                                <div class="main-xuangou-liebiao-bottom1-xiaoyuandian">
                                    <span>🎂</span>
                                </div>
                            </div>

                            <div class="main-xuangou-liebiao-bottom2">
                                <img src="${item.goodsImg}" alt="" style=" width: 130px;
                                height: 140px;">
                            </div>

                            <div class="main-xuangou-liebiao-bottom3">
                                <p>${item.goodsName}</p>
                                <span>${item.goodsDesc}</span>
                            </div>

                            <div class="main-xuangou-liebiao-bottom4">
                                <div class="main-xuangou-liebiao-bottom4-1">
                                    <select value="选择重量">
                                        <option class="option" value="">2磅 908g</option>
                                        <option class="option" value="">3磅 1.36kg</option>
                                        <option class="option" value="">5磅 2.27kg</option>
                                    </select>
                                </div>

                                <div class="main-xuangou-liebiao-bottom4-2">
                                    <img src="./images//shopping.image/刀叉.png" alt="">
                                    <span>含10套餐具（每套一个餐盘，一把餐勺）</span>
                                </div>

                                <div class="main-xuangou-liebiao-bottom4-3">
                                    巧克力生日牌 <select name="" id="">
                                        <option value="">Happy Birthday</option>
                                        <option value="">不需要</option>
                                        <option value="">生日快乐</option>
                                        <option value="">永远开心</option>
                                    </select>
                                </div>
                            </div>

                            <div class="main-xuangou-liebiao-bottom5">
                                <div class="main-xuangou-liebiao-bottom5-mone">
                                    <a href="#">
                                        <div class="huaguo"><i class="jian">-</i></div>
                                    </a>

                                    <input type="text" value="1" class="input">

                                    <a href="#">
                                        <div class="huaguo">
                                            <span class="jia">+</span> 
                                        </div>
                                    </a>
                                </div>
                                <div class="lazhu">
                                    <span>蜡烛</span>
                                    <select name="" id="">
                                        <option value="">请选择</option>
                                        <option value="">需要</option>
                                        <option value="">不需要</option>
                                    </select>
                                </div>
                            </div>


                            <div class="main-xuangou-liebiao-bottom6">
                                <div class="num">
                                    <span class="xiaoji">￥${item.goodsPrice}.00元</span>
                                </div>  
                            </div>

                            <div class="main-xuangou-liebiao-bottom7">
                                <img src="./images//shopping.image/垃圾桶.png" alt="" id="remove">
                            </div>
                        </div>
                        </div>
                    </div>
                    </div> `
            }).join('')
            $('.main-xuangou').html(add);
        })
    }
</script>

<!-- 购物车商品数据操作 -->
<script>
    // 购物车商品 + 区域
    $('main').on('click', '.jia', function () {
        let num = $(this).parent().parent().prev().val()
        num++
        $(this).parent().parent().prev().val(num)

        $.get("http://localhost/MCAKE/php/updateGoodsCount.php", { vipName: getCookie("username"), goodsId: $(this).parent().parent().parent().parent().parent().parent().attr('goodsid'), goodsCount: Number($('.input').val()) }, function (data1) {
            console.log(data1);
        })
    })

    // 购物车商品 - 区域
    $('main').on('click', '.jian', function () {
        let num = $(this).parent().parent().next().val()
        num--
        if (num <= 1) {
            num = 1
        }
        $(this).parent().parent().next().val(num)

        $.get("http://localhost/MCAKE/php/updateGoodsCount.php", { vipName: getCookie("username"), goodsId: $(this).parent().parent().parent().parent().parent().parent().attr('goodsid'), goodsCount: Number($('.input').val()) }, function (data1) {
            console.log(data1);
        })
    })

    // 购物车 商品删除区域 
    $('main').on('click', '#remove', function () {
        $(this).parent().parent().parent().remove()

        $.get("http://localhost/MCAKE/php/deleteGoods.php", { vipName: getCookie("username"), goodsId: $(this).parent().parent().parent().attr('goodsid'), goodsCount: Number($('.input').val()) }, function (data1) {
            console.log(data1);
        })
    })
</script>